<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子属性</title>
    <style>
        .box1 {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            padding: 50px;
            border: 1px solid rgba(255, 0, 0, 0.7);
            background-color: skyblue;

            background-image: url("./images/bg03.jpg");
            /*图片大过wh后，就只截取对应位置的背景图片了*/
            /*background-size 两个参数一个是宽一个是高*/
        /*background-size: 100% 100%;*/

            /*contain后等比缩放，让文件不走形，但是一旦等比后，图片装不满div,会重复装入图片,也不是最佳的*/
        /*background-size: contain;*/
        background-size: cover;

    }
        .box2 {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            padding: 50px;
            border: 1px solid rgba(255, 0, 0, 0.7);

            /*background-image不支持多个的，必须用background*/
            background: url("./images/bg-lt.png") no-repeat left top,
                url("./images/bg-rt.png") no-repeat right top,
                url("./images/bg-lb.png") no-repeat left bottom,
                url("./images/bg-rb.png") no-repeat right bottom;

        }
</style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>
<hr>
<div class="box3">
123
</div>
</body>
</html>